<template>
  <div class="official-document-table">

    <!-- 数据列表 -->
    <Table style="margin-bottom:10px"
           :data="list"
           :border="true"
           :height="600"
           :columns="currentColumns"
           @on-selection-change="changeSelection">
      <template slot-scope="{ row }"
                slot="enclosure">
        <slot name="enclosure"
              :row="row"></slot>
      </template>
      <template slot-scope="{ row }"
                slot="action">
        <slot name="action"
              :row="row"></slot>
      </template>
    </Table>

    <!-- 分页 -->
    <Page style="text-align:center"
          :total="total"
          :current="params.page"
          :page-size="params.pageSize"
          @on-change="changePage"
          size="small"
          show-total />
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: () => {
        return '发文';
      },
    },
    total: {
      type: Number,
      default: () => 0,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      selection: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '标题',
          key: 'srmsg_title',
          align: 'center',
          minWidth: 180,
        },
        {
          title: '发送时间',
          key: 'send_time',
          align: 'center',
          minWidth: 150,
        },
        {
          title: '创建人',
          key: 'sender_name',
          align: 'center',
          minWidth: 120,
        },
        {
          title: '推送方式',
          key: 'push_type',
          align: 'center',
          minWidth: 120,
          render: (h, params) => {
            if (params.row.have_phone && params.row.have_apppush) {
              return h('div', {}, '短信，app，电脑端');
            } else if (params.row.have_apppush) {
              return h('div', {}, 'app，电脑端');
            } else if (params.row.have_phone) {
              return h('div', {}, '短信，电脑端');
            } else {
              return h('div', {}, '电脑端');
            }
          },
        },
        {
          title: '附件',
          slot: 'enclosure',
          align: 'center',
          widht: 500,
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          width: 220,
        },
      ],
    };
  },

  computed: {
    currentColumns() {
      let columns = [...this.columns];
      if (this.title === '发文') {
        columns.splice(4, 0, {
          title: '阅读情况',
          key: 'receivers',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            let num = 0;
            let nums = 0;
            let receiversArr = [];
            let weidu = [];
            let yidu = [];
            if (params.row.receivers !== undefined) {
              receiversArr = params.row.receivers;
              if (receiversArr.length > 0) {
                receiversArr.map((item, index) => {
                  if (item.is_read === '0') {
                    num++;
                    weidu.push(
                      h(
                        'div',
                        {
                          style: {
                            marginTop: '5px',
                            color: '#999999',
                          },
                        },
                        item.receiver_name
                      )
                    );
                  } else {
                    nums++;
                    yidu.push(
                      h(
                        'div',
                        {
                          style: {
                            marginTop: '5px',
                            color: '#999999',
                          },
                        },
                        item.receiver_name
                      )
                    );
                  }
                });
              }
              return h('div', [
                h(
                  'Poptip',
                  {
                    props: {
                      trigger: 'hover',
                      wordWrap: true,
                      width: '300',
                      placement: 'bottom',
                      zIndex: 888,
                    },
                  },
                  [
                    h('div', `还有${num}人未读`),
                    h(
                      'div',
                      {
                        slot: 'content',
                        style: {
                          display: 'flex',
                          maxHeight: '200px',
                        },
                      },
                      [
                        h(
                          'div',
                          {
                            style: {
                              flex: 1,
                              borderRight: '1px solid #ccc',
                              height: '100%',
                              overflowY: 'auto',
                            },
                          },
                          [
                            h(
                              'div',
                              {
                                style: {
                                  fontWeight: 'bold',
                                },
                              },
                              [
                                h(
                                  'span',
                                  {
                                    style: {
                                      fontSize: '24px',
                                    },
                                  },
                                  num
                                ),
                                h(
                                  'span',
                                  {
                                    style: {
                                      fontSize: '14px',
                                    },
                                  },
                                  '人未读'
                                ),
                              ]
                            ),
                            ...weidu,
                          ]
                        ),
                        h(
                          'div',
                          {
                            style: {
                              flex: 1,
                              paddingLeft: '16px',
                              height: '100%',
                              overflowY: 'auto',
                            },
                          },
                          [
                            h(
                              'div',
                              {
                                style: {
                                  fontWeight: 'bold',
                                },
                              },
                              [
                                h(
                                  'span',
                                  {
                                    style: {
                                      fontSize: '24px',
                                    },
                                  },
                                  nums
                                ),
                                h(
                                  'span',
                                  {
                                    style: {
                                      fontSize: '14px',
                                    },
                                  },
                                  '人已读'
                                ),
                              ]
                            ),
                            ...yidu,
                          ]
                        ),
                      ]
                    ),
                  ]
                ),
              ]);
            } else {
              return h('div', '暂无数据');
            }
          },
        });
      } else if (this.title === '收文') {
        columns.splice(1, 0, {
          title: '状态',
          align: 'center',
          minWidth: 90,
          render: (h, params) => {
            if (params.row.is_read === '1') {
              return h('div', '已读');
            } else {
              return h('div', '未读');
            }
          },
        });
      } else if (this.title === '回收') {
        columns.splice(3, 0, {
          title: '来源',
          key: 'srmsg_model',
          align: 'center',
          minWidth: 100,
        });
      }
      return columns;
    },
  },

  methods: {
    changePage(page) {
      this.$emit('change-page', page);
    },

    changeSelection(selection) {
      this.selection = selection;
    },

    getSelection() {
      if (this.selection.length < 1) {
        this.$Message.warning('请选择数据!');
        return false;
      }
      return this.selection;
    },
  },
};
</script>

<style>
</style>